<template>
  <div>
      <div class="search-list mb-10">
        <div style="display: flex;align-items: center;margin-right: 10px">
          <div>
            <component
                v-bind:is="item.propertyType"
                :property.sync="item"
                v-for="(item, index) in getPower"
                :key="index"
                @updateVal="updateVal"
            ></component>
          </div>
          <el-button type="primary" size="small" @click="searchFn('search')" class="ml-10"><i
              class="el-icon-search"></i>搜索
          </el-button>
          <el-button size="small" @click="searchFn('refresh')"><i class="el-icon-refresh"></i>重置刷新</el-button>
        </div>
        <el-button type="primary" @click="trainningId =0,addTrainVisible=true" size="small" plain><i
            class="el-icon-plus"></i>添加班级巡班人员
        </el-button>
      </div>
      <!--本体列表，数据 -->
      <el-table
          ref="multipleTable"
          :data="arryList"
          :stripe="tableStripe"
          :border="tableBorder"
          tooltip-effect="dark"
          header-cell-class-name="table-text-c"
          cell-class-name="table-text-c">
        <el-table-column
            align="center"
            prop="id"
            label="班级"
            width="200"
            :key="2">
          <template slot-scope="scope">
            {{ scope.row.classes ? scope.row.classes.class_name : '--' }}
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            prop="name"
            label="班级巡班人员"
            :key="3">
          <template slot-scope="scope">
            <el-tag
                v-for="tag in scope.row.user_ids"
                :key="tag.id"
                class="mr-5 mb-10">
              {{ tag.realname }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            align="center"
            label="操作"
            width="190"
            :key="7">
          <template slot-scope="scope">
            <el-button plain size="mini" @click="showDetailFn(scope.row.id)" >巡班人员
            </el-button>
            <el-button size="mini" @click="deletefn(scope.row.id)" type="danger" plain>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            :page-size="page.pagesize"
            :current-page="page.pageindex"
            layout="total, prev, pager, next"
            :total="page.total"
            @current-change="handleSizeChange"></el-pagination>
      </el-col>
    <div class="height40"></div>
    <addTrainingUser :visible.sync="addTrainVisible" @InitFn="InitFn" :trainningId="trainningId"></addTrainingUser>
  </div>
</template>

<script>
import {pagination} from '@/utils/util.js'

export default {
  components: {
  },
  data() {
    return {
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      arryList: [], // 数据列表
      // 页数
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      addTrainVisible: false,
      trainningId: 0,
      searchBox: {
        class_id: '',
        section_id: ''
      },
      getPower: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '年段', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      }
    }
  },
  watch: {
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    async InitFn() {
      let option_ = JSON.parse(JSON.stringify(this.searchBox))
      option_.p = this.page.pageindex
      let data = await this.$fetch(this.api.classActive.training.index, option_)
      if (!data.code) {
        this.arryList = data.list.data;
        this.page.total = data.list.total;
      }
    },
    searchFn(option) {
      if (option === 'refresh') {
        let newGetPower = JSON.parse(JSON.stringify(this.getPower))
        newGetPower['section_id'].valueText = '';
        newGetPower['section_id'].child[0].valueText = '';
        this.getPower = newGetPower;
        this.searchBox.class_id = '';
        this.searchBox.section_id = '';
      }
      this.page.pageindex = 1;
      this.InitFn()
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    handleSelectionChange(val) {
      this.handleSelection = val
    },
    showDetailFn(id) {
      this.trainningId = id;
      this.addTrainVisible = true;
    },
    deletefn(id) {
      this.$confirm('确认永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          this.detelCalss(id)
      }).catch(() => {
      })
    },
    async detelCalss(id) {
      let data = await this.$post(this.api.classActive.training.delete, {id: id})
      if (!data.code) {
        this.$message.success(data.msg)
        this.InitFn()
      }
    },
    // 更新值
    updateVal(option) {
      // console.log('变更数据收到的数据内容：', option)
      if (option.input) {
        this.searchBox[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.searchBox[option.select[i].name] = option.select[i].valueText
          } else {
            this.searchBox[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
    },
  },
  mounted() {
  },
  // beforeUpdate() {
  //   this.$nextTick(() => {
  //     //在数据加载完，重新渲染表格
  //     this.$refs["multipleTable"].doLayout();
  //   });
  // },
}
</script>
<style>
.lead-list {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fddeae;
  margin-bottom: 5px;
  border-radius: 2px;
  padding: 5px 0;
}

.lead-list:last-child {
  margin-bottom: 0;
}

.lead-list span {
  margin-right: 30px;
}
</style>

